import React, { useEffect, useState } from "react";
import { Image } from "antd";
import axios from "axios";
import { BASEURL } from "@/pages/api/config";

const PicsPage: React.FC = () => {
  let [picsList, setPicsList] = useState<string[]>([]);

  const clickHandler = (event: Event) => {
    console.log(event.target);
  };

  useEffect(() => {
    const getPicsListHandler = async (): Promise<any> => {
      let res = await axios.get("http://localhost:10086/api/files");
      // console.log(res.data.filenameList);
      setPicsList(res.data.filenameList);
      console.log(picsList);

      return;
    };
    getPicsListHandler();
  }, []);

  return (
    <>
      <h1>pics</h1>

      {picsList.map((imageSrc) => {
        // @ts-ignore
        return (
          /*          <Image
                                src={imageSrc}
                                width={200}
                                height={200}
                                alt={imageSrc}
                                key={imageSrc}
                              ></Image>*/
          <p key={imageSrc} onClick={clickHandler}>{`${BASEURL}${imageSrc}`}</p>
        );
      })}

      {/*<Image src={`/pic2.png`} width={200} height={200}></Image>*/}
    </>
  );
};

export default PicsPage;
